<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<h:head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />	
		<title>SchoolAdmin</title>
	   <link type="text/css" href="menu.css" rel="stylesheet" />
	    <script type="text/javascript" src="jquery.js"></script>
	    <script type="text/javascript" src="menu.js"></script>
	    <style type="text/css">
			.ui-widget {
				font-size: 11px !important;
				font-family: Verdana, Arial, Tahoma;
				font-weight: light;
			}
		</style>
	</h:head>

	<h:body>
		<div id="menu">
		    <ul class="menu">
		        <li><a href="#" class="parent"><span>Home</span></a>
		            <div><ul>
		                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
		                    <div><ul>
		                        <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
		                            <div><ul>
		                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
		                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
		                            </ul></div>
		                        </li>
		                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
		                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
		                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
		                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
		                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
		                        <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
		                            <div><ul>
		                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
		                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
		                            </ul></div>
		                        </li>
		                    </ul></div>
		                </li>
		                <li><a href="#"><span>Sub Item 2</span></a></li>
		                <li><a href="#"><span>Sub Item 3</span></a></li>
		            </ul></div>
		        </li>
		        <li><a href="#" class="parent"><span>Product Info</span></a>
		            <div><ul>
		                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
		                    <div><ul>
		                        <li><a href="#"><span>Sub Item 1.1</span></a></li>
		                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
		                    </ul></div>
		                </li>
		                <li><a href="#" class="parent"><span>Sub Item 2</span></a>
		                    <div><ul>
		                        <li><a href="#"><span>Sub Item 2.1</span></a></li>
		                        <li><a href="#"><span>Sub Item 2.2</span></a></li>
		                    </ul></div>
		                </li>
		                <li><a href="#"><span>Sub Item 3</span></a></li>
		                <li><a href="#"><span>Sub Item 4</span></a></li>
		                <li><a href="#"><span>Sub Item 5</span></a></li>
		                <li><a href="#"><span>Sub Item 6</span></a></li>
		                <li><a href="#"><span>Sub Item 7</span></a></li>
		            </ul></div>
		        </li>
		        <li><a href="#"><span>Help</span></a></li>
		        <li class="last"><a href="#"><span>Contacts</span></a></li>
		    </ul>
		</div>
		
		<p:ajaxStatus
			style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">
			<f:facet name="start">
				<p:graphicImage value="/images/loading.gif" />
			</f:facet>
	
			<f:facet name="complete">
				<h:outputText value="" />
			</f:facet>
		</p:ajaxStatus>
	
		<h:form id="form" enctype="multipart/form-data">
			<p:growl id="msgs" showDetail="false" showSummary="true" />
	
			<p:panel>
				<h:panelGrid columns="2">
					<h:outputText value="Nome:" />
					<p:inputText value="#{mbProduto.produto.nome}" />
	
					<h:outputText value="Preço:" />
					<p:inputText value="#{mbProduto.produto.preco}" />
	
					<p:commandButton value="Salvar" action="#{mbProduto.salvaProduto()}"
						update=":form:msgs, :form:dtProdutos, :form" />
					<p:commandButton value="Limpar" onclick="form.reset()" />
				</h:panelGrid>
			</p:panel>
	
			<p:dataTable id="dtProdutos" value="#{mbProduto.produtos}" var="p"
				style="text-align: center;" emptyMessage="Nenhum produto cadastrado.">
				<p:column headerText="ID" style="width:2%; font-weight: bold;">
					<h:outputText value="#{p.id}" />
				</p:column>
	
				<p:column headerText="Nome" style="width:24%">
					<h:outputText value="#{p.nome}" />
				</p:column>
	
				<p:column headerText="Preço" style="width:24%">
					<h:outputText value="#{p.preco}" />
				</p:column>
	
				<p:column style="width:4%">
					<p:commandButton id="addButton" update=":form:infoFoto"
						oncomplete="fotoDialog.show()" icon="ui-icon-plus"
						title="Adicionar imagens">
						<f:setPropertyActionListener value="#{p}"
							target="#{mbProduto.produtoSelecionado}" />
					</p:commandButton>
	
					<p:spacer width="10" />
	
					<p:commandButton id="showButton" update=":form:infoProduto"
						oncomplete="produtoDialog.show()" icon="ui-icon-search"
						title="Visualizar imagens" action="#{mbProduto.listaFotosProduto}">
						<f:setPropertyActionListener value="#{p}"
							target="#{mbProduto.produtoSelecionado}" />
					</p:commandButton>
				</p:column>
			</p:dataTable>
	
			<p:dialog header="Detalhes do produto" widgetVar="produtoDialog"
				resizable="false" id="produtoDlg" showEffect="fade"
				
				modal="true" draggable="true" maximizable="true"
				minimizable="true">
	<!-- 			hideEffect="explode" --> 
	
				<h:panelGrid id="infoProduto" columns="2" style="margin:0 auto;">
	
					<h:outputText value="Nenhnuma imagem encontrada"
						rendered="#{mbProduto.fotos.size() == 0}" />
	
					<p:galleria var="f" value="#{mbProduto.fotos}" effect="slide"
						effectSpeed="100" panelHeight="250" panelWidth="500"
						frameHeight="70" frameWidth="160" filmstripPosition="bottom"
						showOverlays="true">
	
						<p:graphicImage value="/temp/#{f.id}.jpg" cache="false" width="500"
							height="250" />
						<p:galleriaOverlay title="Descrição:">
							<h:outputText value="#{f.descricao}" />
						</p:galleriaOverlay>
	
					</p:galleria>
				</h:panelGrid>
			</p:dialog>
	
			<p:dialog header="Adicionar imagens" widgetVar="fotoDialog"
				position="center" resizable="false" id="fotoDlg" showEffect="fade"
				modal="true" width="800">
	<!-- 			hideEffect="explode" --> 
	
				<h:panelGrid id="infoFoto" columns="2">
	
					<h:outputText value="Foto: " />
					<p:fileUpload fileUploadListener="#{mbProduto.processFileUpload}"
						label="Escolher" cancelLabel="Cancelar" sizeLimit="400000"
						invalidSizeMessage="Imagem muito grande" auto="true"
						invalidFileMessage="Tipo de imagem não suportado"
						allowTypes="/(\.|\/)(jpe?g|png)$/" />
	
					<h:outputText value="Descrição: " />
					<p:inputText value="#{mbProduto.foto.descricao}" />
	
					<p:commandButton value="Adicionar" icon="ui-icon-plus"
						action="#{mbProduto.salvaFoto()}" update="infoFoto, form" />
	
				</h:panelGrid>
			</p:dialog>
		</h:form>
		
		<div id="copyright">Copyright &copy; 2013 <a href="http://apycom.com/">Apycom jQuery Menus</a></div>
	</h:body>
</html>